<template>
    <view>
        <view class="imgbox">
            <image class="truebox" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715331448807508.png" mode="widthFix"></image>
			<block v-if="true">
				<view class="imgtext">预订成功</view>
			</block>
            <block v-else>
				<view class="imgtext">取消成功</view>
				<view class="imgtitle">支付金额￥136已原路退回</view>
			</block>
            
        </view>
		<block v-if="true">
			<view>
				<view class="content">
					<view class="title">场地名称</view>
					<view class="name">华景羽毛球馆</view>
				</view>
				<view class="content">
					<view class="title">运动项目</view>
					<view class="name">羽毛球</view>
				</view>
				<view class="content">
					<view class="title">预计日期</view>
					<view class="name">04-12(今天)</view>
				</view>
				<view class="content">
					<view class="title">预订场次</view>
					<view class="name">1号场(14:00-15:00)、3号场(14:00-15:00)</view>
				</view>
				<view class="content">
					<view class="title">手机号</view>
					<view class="name">12542518561</view>
				</view>
			</view>
			<view class="buttonbox">
				<!--  #ifdef MP-WEIXIN -->
				<button hover-class="none" open-type="share" plain="true">
					<view class="sharebox">
						<view class="text5" >分享好友</view>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<!-- <button hover-class="none" @click="app_share" plain="true">
					<view class="sharebox">
						<view class="text5" >分享好友</view>
					</view>
				</button> -->
				<!-- #endif -->
				<view class="rbutton" @click="gotopage()">查看预订</view>
			</view>
		</block>
		<block v-else>
			<view class="cancelbtn">完成</view>
		</block>
        
        

        <!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!--  #endif -->
    </view>
</template>

<script>
export default {
components: {},
data() {
return {

};
},
methods: {
    gotopage(){
        this.nav_to('/pages/ball/venue_detail')
    },
    //分享
		app_share() {
			this.$refs.share.open();
		},
    		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: user.Name + `向您推荐${this.place.ShopName}`,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/court/stadium?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/court/stadium?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		sharePYQ() {
			const user = uni.getStorageSync('user');
			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: user.Name + `向您推荐${this.place.ShopName}`,
				summary: `${this.place.Description}`,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
},
created() {

},
}
</script>
<style lang='scss'>
button[plain] {
	border: 0;
}
button::after{
    z-index: -10;
} 
.cancelbtn{
	width: 360rpx;
	height: 88rpx;
	border-radius: 44rpx;
	border: 2rpx solid #706EEE;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	color: #706EEE;
	margin: 0 auto;
}
.buttonbox{
    display: flex;
    justify-content: space-between;
    margin-top: 80rpx;
    .sharebox{
        width: 320rpx;
        height: 88rpx;
        border-radius: 44rpx;
        border: 1rpx solid #706EEE;
        text-align: center;
        line-height: 88rpx;
        margin-left: 44rpx;
        .text5{
            color: #706EEE;
            font-size: 32rpx;
        }
    }
    .rbutton{
        width: 320rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #706EEE;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        margin: 0 auto;
    }
}
.imgbox{
    width: 300rpx;
    margin: 24rpx auto;
    text-align: center;
    margin-bottom: 88rpx;
    .truebox{
        width: 112rpx;
        height: 112rpx;
    }
    .imgtext{
        font-size: 32rpx;
        color: #333333;
		margin-bottom: 22rpx;
    }
	.imgtitle{
		font-size: 24rpx;
		color: #666666;
	}
}
.content{
    width: 100%;
    height: 92rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #E4E4E4;
    .title{
        font-size: 32rpx;
        color: #999999;
        width: 150rpx;
    }
    .name{
        font-size: 32rpx;
        color: #333333;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: end;
    }
}

	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}
</style>